@import "variables";

.modal-content {
    border: transparent;
    box-shadow: 3px 4px 8px 4px rgba(92,92,92,0.08);
    border-radius: $card-radius;
    background-color: transparent;
}

.modal-body {
    @include card-bg-image;
    position: relative;
    // mi-width: 37.5rem;
    min-height: 20.75rem;
    padding: 0;
    overflow: hidden;

    img {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        vertical-align: middle;
        width: 100%;
        height: 100%;
        object-fit: cover;
    }
}

.modal-dialog {
    min-width: 20.75rem;
    max-width: 37.5rem;
}

.modal-header, .modal-footer {
    border: transparent;
}

.modal-header {
    // border-radius: $card-radius $card-radius 0 0;
    padding: 0.5rem 1rem;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;

    .modal-title{
        @include mid-title-semibold;
    }
}

.modal-footer {
    // border-radius: 0 0 $card-radius $card-radius;
}